<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提供商新建/编辑</title>
    <link rel="stylesheet" type="text/css" href="<%request.getContextPath();%>/css/jquery.dataTables.css"/>
    <link rel="stylesheet" href="<%request.getContextPath();%>/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%request.getContextPath();%>/css/commonStyle.css"/>
  <link rel="stylesheet" href="<%request.getContextPath();%>/css/Login.css">
    <style type="text/css" class="init">
      .boxContent {
        float: left;
        margin-right: 10px;
        margin-bottom:8px;
        border-radius: 5px;
        width: 120px;
        height: 30px;
        border: 1px solid #CCC;
        text-align: center;
        padding-top: 5px;
      }
      .boxGroup {
        margin-top: 8px;
      }
    </style>
  <!--  图片上传  -->
  <script type="text/javascript" src="<%request.getContextPath();%>/js/plus_more.js"></script>
  <!--  图片上传  -->
    <script src="<%request.getContextPath();%>/js/jquery-1.11.2.min.js"></script>
    <script src="<%request.getContextPath();%>/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%request.getContextPath();%>/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" class="init">
    $(document).ready(function() {
      var ds = eval( ${data});
	var count = 0;
    var table = $('#example').DataTable({
        "data": ds,
		"bFilter": false,
		"bPaginate": true,
        "iDisplayLength" : 6,
		"bLengthChange": false,
        "order": [[0, "desc"]],
        "paging": false, "columns": [
          {"data": "company"},
          {"data": "forName"},
          {"data": "contacts"},
          {"data": "parkID"},
          {"data": "forStatus"}
        ]
		});

      $('#example tbody').on('click', 'tr', function() {
        $(this).toggleClass('selected');
        var reg = $(this).find('td').eq(1).html();
        if ($(this).hasClass('selected')) {
          $(".boxGroup").append('<div class="boxContent boxContent'+reg+'">'+reg+'</div>');
        } else {
          $(".boxContent"+reg).remove();
        }
      });

      $('#Pu_ch_no').click(function() {
        table.$('tr.selected').removeClass('selected');
//		$(".boxGroup").hide(); 可以删除了
        $(".boxGroup").text(""); // 因为此处清楚了所有 selected 需要把框里的内容页清空
      });

	$("#name").blur(function(){
					var name=$.trim($("#name").val()); 
					if(name.length>18){
						$("#letterP").html("<span>&nbsp;最多18个汉字</span>")
										   .css("color","red"); 
					}
					else if(name.length<1){
						$("#letterP").html("<span>&nbsp;公司名称不能为空</span>")
										   .css("color","red"); 
					}
					else{
						$("#letterP").html("<span>最多18个汉字</span>")
										   .css("color","black"); 
						}
				});
	

   //验证邮箱
    $("#mail").blur(function(){
          var reg=/.+@.+\.[a-zA-Z]{2,4}$/;
          //邮箱格式不正确
          if(!reg.test($("#mail").val())){
              $("#mailP").html("<span>格式不对</span>")
                           .css("color","red");
          }
          //邮箱格式正确
          else{
              $("#mailP").html("有效邮箱")
			               .css("color","green");
		  }
     });
 	$("#phone").blur(function(){
        var mob=$.trim($("#phone").val()); 
        var isPhone=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; 
        if(!isPhone.test(mob)){
              $("#phoneP ").html("<span>&nbsp;电话号码格式不对</span>")
                               .css("color","red");   
        }
        else{
              $("#phoneP ").html("<span>&nbsp;电话号码正确</span>")
                               .css("color","green");   
          }
         });
		 
   	$("#address").blur(function(){
		var address=$.trim($("#address").val());
		if(address.length<5||address.length>120){
			$("#addressP").html("<span>必须大于5个字符，小于120个</span>")
							   .css("color","red"); 
					}
				});
	$("#intro").blur(function(){
		var intro=$.trim($("#intro").val());
		if(intro.length>500){
			$("#addressP").html("<span>必须小于500个</span>")
							   .css("color","red"); 
					}
				});
	
} );
    </script>
    </head>

<body>
<div class="container">

<!--      页头-->
<header>
  <h2><span id="title">${titilename}</span></h2>
</header>
<hr>

<article>
<form class="form-horizontal" method="post" action="/add/provider" enctype="multipart/form-data">

  <!--         编号-->
  <div class="form-group">
    <label for="num" class="col-sm-2 control-label">编号</label>
    <div class="col-sm-4">
      <input name="serviceproviderid" type="text" class="form-control" value="${serviceProvider.serviceproviderid}" id="num" readonly>
    </div>
    <p class="help-inline" style="margin-top:8px;">系统自动分配，每个企业的唯一ID</p>
  </div>
  <!--         公司名称-->
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">公司名称</label>
    <div class="col-sm-4">
      <input name="company" type="text" class="form-control" id="name" value="${serviceProvider.company}">
    </div>
    <p class="help-inline" style="margin-top:8px;" id="letterP">最多18个汉字</p>
  </div>
  <!--        联系人-->
  <div class="form-group">
    <label for="contact" class="col-sm-2 control-label">联系人</label>
    <div class="col-sm-4">
      <input name="contacts" type="text" class="form-control" id="contact" value="${serviceProvider.contacts}">
    </div>
  </div>
  <!--          电话-->
  <div class="form-group">
    <label for="phone" class="col-sm-2 control-label">电话</label>
    <div class="col-xs-4">
      <input name="mobile" type="text" class="form-control" id="phone" value="${serviceProvider.mobile}">
    </div>
     <p class="help-inline" style="margin-top:8px;" id="phoneP"></p>
  </div>
  <!--          邮箱-->
  <div class="form-group">
    <label for="mail" class="col-sm-2 control-label">邮箱</label>
    <div class="col-xs-4">
      <input name="email" type="text" class="form-control" id="mail" value="${serviceProvider.email}">
    </div>
    <p class="help-inline" style="margin-top:8px;" id="mailP"></p>
    
  </div>
  <!--          注册时间-->
  <div class="form-group">
    <label for="mail" class="col-sm-2 control-label">注册时间</label>
    <div class="col-xs-4">
      <input name="registertime" type="datetime-local" class="form-control datetime-local" id="logup" value="${serviceProvider.registertime}">
    </div>
  </div>
  <!--          地理位置-->
  <div class="form-group">
    <label class="col-sm-2 control-label">地理位置</label>
    <div class="col-sm-2">
      <select   class="form-control">
        <option value="浙江省">浙江省</option>
        <option value="不限">不限</option>
      </select>
    </div>
    <div class="col-sm-2">
      <select  class="form-control">
        <option value="杭州市">杭州市</option>
        <option value="不限">不限</option>
      </select>
    </div>
    <div class="col-sm-2">
      <select name="regionId" class="form-control">
        <option value="区">县/区</option>
        <option value="不限">不限</option>
      </select>
    </div>
  </div>
  <!--          详细地址-->
  <div class="form-group">
    <label for="address" class="col-sm-2 control-label">详细地址</label>
    <div class="col-sm-8">
      <input name="address" type="text" class="form-control" id="address" value="${serviceProvider.address}"  placeholder="不需要重复填写省市区，必须大于5个字符，小于120个字符">
    </div>
    <p class="help-inline" style="margin-top:8px;" id="addressP"></p>
  </div>
  <!--          公司简介-->
  <div class="form-group">
    <label for="intro" class="col-sm-2 control-label">公司简介</label>
    <div class="col-sm-8">
      <textarea name="introduction" id="intro" class="form-control" rows="5" placeholder="公司介绍，不超过500字">${serviceProvider.introduction}</textarea>
    </div>
    <p class="help-inline" style="margin-top:8px;" id="introP"></p>
  </div>
  <!--          荣誉资质-->
  <div class="form-group">
    <label for="honor" class="col-sm-2 control-label">荣誉资质</label>
    <div class="col-sm-8">
      <textarea name="honor" id="honor" class="form-control" rows="5">${serviceProvider.honor}</textarea>
    </div>
  </div>
  <!--     !!!!!    公司logo-->
  <div class="form-group">
    <label class="col-sm-2 control-label">园区logo</label>
    <div id="uplogol_3" style="float:left; border:1px solid #999999; margin-left:14px;"><img id="showlogol_3" name="" src="images/Project-LOGO.png" class="other_pic_logo"/></div>
    <div style="float:left;">
      <label for="surelogol_3" class="btn btn-primary submit_btn_img_p" style="margin-left:20px; margin-top:20px;" > +更换图片
        <input name="files" type="file" onchange="previewImage(this,'uplogol_3','showlogol_3',120,120)" name="pic_submit" class="submit_btn" style="display:none;" id="surelogol_3" value="上传Logo"/>
      </label>
      <p class="Tab_he_2">规格：120✖120；</p>
      <p class="Tab_he_3">格式：JPG；</p>
    </div>
  </div>
  <!--          服务产品-->
  <div class="form-group">
    <label class="col-sm-2 control-label">服务产品</label>
    <div class="col-sm-8">
      <button type="button" class="btn btn-default" id="choose_pro">选择服务产品</button>
      <button type="button" class="btn btn-default" id="Pu_ch_no" style="width:110px;">重置</button>
      <div class="boxGroup" hidden></div>
    </div>
  </div>
  <!--         服务区域-->
  <div class="form-group row">
    <label class="col-sm-2 control-label">服务地域</label>
    <div class="selectarea">
      <select  id="Province" class="form-control" size=4>
        <option value="不限">不限</option>
        <option value="浙江省">浙江省</option>
      </select>
    </div>
    <div class="selectarea">
      <select  id="city" class="form-control" size=4>
        <option value="不限">不限</option>
        <option value="杭州市">杭州市</option>
      </select>
    </div>
    <div class="selectarea">
      <select  id="area" class="form-control" size=4>
        <option value="不限">不限</option>
        <option value="区">县/区</option>
      </select>
    </div>
    <div class="selectarea">
      <select  id="park" class="form-control" size=4>
        <option value="不限">不限</option>
        <option value="园区">园区</option>
      </select>
    </div>
    <button type="button" class="btn btn-primary glyphicon glyphicon-forward" style="margin-left:10px;margin-top:25px;float:left"></button>
    <div class="selectarea" class="col-sm-2">
    <select name="rigionId" class="form-control" size=4 multiple="multiple">
      <option value=""></option>
      <option value=""></option>
    </select>
  </div>
  </div>
  <!--          操作备注-->
  <div class="form-group">
    <label for="remark" class="col-sm-2 control-label">操作备注</label>
    <div class="col-sm-8">
      <textarea name="logContent" id="remark" class="form-control" rows="5"></textarea>
    </div>
  </div>
  <!--          按钮组-->
  <div class="buttongroup" style="width:970px; margin-left:0px; margin-top:0px;">
    <button type="button" class="btn btn-primary" id="contact_btn1">保存为草稿</button>
    <button type="button" class="btn btn-primary" id="contact_btn2">保存并上线</button>
    <button type="button" class="btn" id="p_savenone" style="margin-left: 80px;width:100px;margin-top:13px;">取消</button>
  </div>
  <!-- 保存为草稿的弹窗 开始 -->
  <div id="Popups_savech" class="Popup_out_st">
    <div id="Con_box_savech" class="Popup_in_st">
      <img src="../images/close.png" id="closePopups_savech" class="Close_Popups"/>
      <label class="Popup_label">保存为草稿</label>
      <hr class="Popup_in_hr"/>
      <p class="Popup_in_p">保存修改内容？</p>
      <button type="submit" class="btn btn-primary" id="Popups_saveyes" style="width: 60px;margin-left: 80px;margin-top: 8px;float: left;">是</button>
      <button class="btn btn-primary" id="Popups_saveno" style="margin-left: 50px;margin-top: 8px;width: 60px;float: left;">否</button>
    </div>
  </div>
  <!-- 保存为草稿弹窗 结束 -->
  <!-- 保存并上线弹窗 开始 -->
  <div id="Popups_saveup" class="Popup_out_st">
    <div id="Con_box_saveup" class="Popup_in_st">
      <img src="../images/close.png" id="closePopups_saveup" class="Close_Popups"/>
      <label class="Popup_label">保存并上线</label>
      <hr class="Popup_in_hr"/>
      <p class="Popup_in_p">保存修改内容并发布上线？</p>
      <button type="submit" class="btn btn-primary" id="Popups_saveupyse" style="width: 60px;margin-left: 80px;margin-top: 8px;float: left;">是</button>
      <button class="btn btn-primary" id="Popups_saveupno" style="margin-left: 50px;margin-top: 8px;width: 60px;float: left;">否</button>
    </div>
  </div>
  <!-- 保存并上线弹窗 结束 -->
  <!-- 取消弹窗 开始 -->
  <div id="Popups_savenone" class="Popup_out_st">
    <div id="Con_box_savenone" class="Popup_in_st">
      <img src="../images/close.png" id="closePopups_savenone" class="Close_Popups"/>
      <label class="Popup_label">取消</label>
      <hr class="Popup_in_hr"/>
      <p class="Popup_in_p">确定放弃当前文案修改？</p>
      <button type="reset" class="btn btn-primary" id="Popups_savenoneyse" style="width: 60px;margin-left: 80px;margin-top: 8px;float: left;">是</button>
      <button class="btn btn-primary" id="Popups_savenoneno" style="margin-left: 50px;margin-top: 8px;width: 60px;float: left;">否</button>
    </div>
  </div>
  <!-- 取消弹窗 结束 -->
  <!--  选择弹框 开始  -->
  <div id="Popups_chpro" class="Popup_out_st">
    <div id="Con_box_chpro" class="Popup_in_chpro">
      <img src="images/close.png" id="closePopups_chpro" class="Close_Popups" />
      <label class="Popup_label">选择服务产品</label>
      <hr class="Popup_in_chhr" />
      <div class="row show-grid unified-border choosen">
        <table id="example" class="display_da" cellspacing="0" style="width: 630px; min-height: 300px;">
          <thead>
          <tr>
            <th>公司名称</th>
            <th>服务产品</th>
            <th>联系人</th>
            <th>所属地域</th>
            <th>状态</th>
          </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
  <!--  选择弹框 结束  -->
</form>
</article>
  </div>
  <script type="text/javascript">
    wdh=$(window).width();
    left=(wdh-330)/2;
    www=$(document).width();
    hhh=$(document).height();
    $(document).ready(function(){
      //保存为草稿
      $("#contact_btn1").click(function(){
        $("#Popups_savech").fadeIn("slow");
        $("#page_index").css('overflow','scroll');
        $("#page_index").css('overflow','hidden');
        $("#Con_box_savech").css('margin-left',left);
        $("#Con_box_savech").css('margin-top','1000px');
      });
      $("#closePopups_savech").click(function(){
        $("#Popups_savech").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_saveyes").click(function(){
        $("#Popups_savech").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_saveno").click(function(){
        $("#Popups_savech").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      //保存并上线
      $("#contact_btn2").click(function(){
        $("#Popups_saveup").fadeIn("slow");
        $("#page_index").css('overflow','scroll');
        $("#page_index").css('overflow','hidden');
        $("#Con_box_saveup").css('margin-left',left);
        $("#Con_box_saveup").css('margin-top','1000px');
      });
      $("#closePopups_saveup").click(function(){
        $("#Popups_saveup").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_saveupyse").click(function(){
        $("#Popups_saveup").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_saveupno").click(function(){
        $("#Popups_saveup").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      //取消
      $("#p_savenone").click(function(){
        $("#Popups_savenone").fadeIn("slow");
        $("#page_index").css('overflow','scroll');
        $("#page_index").css('overflow','hidden');
        $("#Con_box_savenone").css('margin-left',left);
        $("#Con_box_savenone").css('margin-top','1000px');
      });
      $("#closePopups_savenone").click(function(){
        $("#Popups_savenone").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_savenoneyse").click(function(){
        $("#Popups_savenone").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });

      $("#Popups_savenoneno").click(function(){
        $("#Popups_savenone").fadeOut("slow");
        $("#page_index").css('overflow-y','auto');
      });
      //选择服务产品
      $("#choose_pro").click(function() {
        $("#Popups_chpro").fadeIn("slow");
        $("#page_index").css('overflow', 'scroll');
        $("#page_index").css('overflow', 'hidden');
        $("#Con_box_chpro").css('margin-left', left1);
        $("#Con_box_chpro").css('margin-top', '800px');
      });

      $("#closePopups_chpro").click(function() {
        $("#Popups_chpro").fadeOut("slow");
        $("#page_index").css('overflow-y', 'auto');
        $(".boxGroup").show();
      });

      $("#page_index ").css('width',www);
    });
    $(window).resize(function(){
      wdh=$(window).width();
      left=(wdh-330)/2;
      www=$(document).width();
      //保存为草稿
      $("#Con_box_savech").css('margin-left',left);
      $("#Con_box_savech").css('margin-top','1000px');
      //保存并上线
      $("#Con_box_saveup").css('margin-left',left);
      $("#Con_box_saveup").css('margin-top','1000px');
      //取消
      $("#Con_box_savenone").css('margin-left',left);
      $("#Con_box_savenone").css('margin-top','1000px');
      //选择服务产品
      $("#Con_box_chpro").css('margin-left', left1);
      $("#Con_box_chpro").css('margin-top', '800px');

      $("#page_index ").css('width',www);
    });
  </script>
</body>
</html>